<script setup lang="ts">
import { reactive, ref } from 'vue';

import {
  Breadcrumb,
  BreadcrumbItem,
  Button,
  Dropdown,
  Select,
  Table,
} from 'ant-design-vue';
import dayjs from 'dayjs';
import { Download, Printer, RefreshCw } from 'lucide-vue-next';

interface GeneralLedgerRecord {
  balance: null | number;
  code: string;
  credit: null | number;
  debit: null | number;
  direction: string;
  isSpecial?: boolean;
  key: string;
  period: string;
  summary: string;
}

interface QueryForm {
  accountingPeriod: dayjs.Dayjs | null;
  selectedSubject: string;
}

// 查询表单数据
const queryForm = reactive<QueryForm>({
  selectedSubject: '1001',
  accountingPeriod: dayjs('2025'),
});

// 科目选项
const subjectOptions = [
  { value: '1001', label: '1001 库存现金' },
  { value: '1002', label: '1002 银行存款' },
  { value: '1012', label: '1012 其他货币资金' },
  { value: '1101', label: '1101 短期投资' },
  { value: '1121', label: '1121 应收票据' },
  { value: '1122', label: '1122 应收账款' },
];

// 年份选项
const yearOptions = [
  { value: '2023', label: '2023' },
  { value: '2024', label: '2024' },
  { value: '2025', label: '2025' },
  { value: '2026', label: '2026' },
];

// 表格列配置
const columns = [
  {
    title: '编码',
    dataIndex: 'code',
    key: 'code',
    width: 80,
    align: 'center' as const,
  },
  {
    title: '期间',
    dataIndex: 'period',
    key: 'period',
    width: 100,
    align: 'center' as const,
  },
  {
    title: '摘要',
    dataIndex: 'summary',
    key: 'summary',
    width: 200,
    align: 'left' as const,
  },
  {
    title: '借方',
    dataIndex: 'debit',
    key: 'debit',
    width: 120,
    align: 'right' as const,
  },
  {
    title: '贷方',
    dataIndex: 'credit',
    key: 'credit',
    width: 120,
    align: 'right' as const,
  },
  {
    title: '方向',
    dataIndex: 'direction',
    key: 'direction',
    width: 80,
    align: 'center' as const,
  },
  {
    title: '余额',
    dataIndex: 'balance',
    key: 'balance',
    width: 120,
    align: 'right' as const,
  },
];

// 总账数据
const generalLedgerData = ref<GeneralLedgerRecord[]>([
  {
    key: '1',
    code: '1',
    period: '2025-01',
    summary: '期初余额',
    debit: null,
    credit: null,
    direction: '借',
    balance: null,
    isSpecial: true,
  },
  {
    key: '2',
    code: '2',
    period: '2025-01',
    summary: '本月合计',
    debit: null,
    credit: null,
    direction: '借',
    balance: null,
    isSpecial: true,
  },
  {
    key: '3',
    code: '3',
    period: '2025-01',
    summary: '本年累计',
    debit: null,
    credit: null,
    direction: '借',
    balance: null,
    isSpecial: true,
  },
]);

// 打印下拉菜单项
const printMenuItems = [
  {
    key: 'print-current',
    label: '打印当前页',
  },
  {
    key: 'print-all',
    label: '打印全部',
  },
  {
    key: 'print-preview',
    label: '打印预览',
  },
];

// 格式化金额
const formatAmount = (amount: null | number): string => {
  if (amount === null || amount === 0) return '';
  return amount.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
};

// 事件处理函数
const handleBackToWorkspace = () => {
  // 返回工作台
};

const handleRefresh = () => {
  // 刷新页面
};

const handleSubjectChange = (value: string) => {
  queryForm.selectedSubject = value;
  // 重新加载数据
};

const handlePeriodChange = (date: dayjs.Dayjs | null) => {
  queryForm.accountingPeriod = date;
  // 重新加载数据
};

const handlePrintMenuClick = ({ key: _key }: { key: string }) => {
  // 处理打印菜单点击
};

const handleDownload = () => {
  // 下载功能
};
</script>

<template>
  <div class="h-full p-4">
    <!-- 页面顶部栏 -->
    <div class="mb-4 flex items-center justify-between">
      <!-- 左侧公司名称 -->
      <div class="text-lg font-medium text-gray-800">
        北京神州神源科技有限公司
      </div>

      <!-- 中间面包屑 -->
      <div class="flex-1 px-4">
        <Breadcrumb>
          <BreadcrumbItem>账簿</BreadcrumbItem>
          <BreadcrumbItem>总账</BreadcrumbItem>
        </Breadcrumb>
      </div>

      <!-- 右侧操作区 -->
      <div class="flex items-center space-x-2">
        <Button type="primary" @click="handleBackToWorkspace">
          返回工作台
        </Button>
        <Button type="text" @click="handleRefresh">
          <RefreshCw class="h-4 w-4" />
        </Button>
      </div>
    </div>

    <!-- 总账核心功能区 -->
    <div class="rounded-lg bg-white p-6 shadow-sm">
      <!-- 查询筛选区 -->
      <div class="mb-6 flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <!-- 科目选择 -->
          <div class="flex items-center space-x-2">
            <span class="text-sm font-medium text-gray-700">科目：</span>
            <Select
              v-model:value="queryForm.selectedSubject"
              :options="subjectOptions"
              placeholder="请选择科目"
              class="w-48"
              @change="handleSubjectChange"
            />
          </div>

          <!-- 会计期间 -->
          <div class="flex items-center space-x-2">
            <span class="text-sm font-medium text-gray-700">会计期间：</span>
            <Select
              v-model:value="queryForm.accountingPeriod"
              :options="yearOptions"
              placeholder="请选择年份"
              class="w-32"
              @change="handlePeriodChange"
            />
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex items-center space-x-2">
          <Dropdown
            :menu="{ items: printMenuItems, onClick: handlePrintMenuClick }"
            placement="bottomRight"
          >
            <Button>
              <Printer class="mr-1 h-4 w-4" />
              打印
            </Button>
          </Dropdown>
          <Button type="primary" @click="handleDownload">
            <Download class="mr-1 h-4 w-4" />
            下载
          </Button>
        </div>
      </div>

      <!-- 总账表格 -->
      <div class="overflow-x-auto">
        <Table
          :columns="columns"
          :data-source="generalLedgerData"
          :pagination="false"
          :scroll="{ x: 800 }"
          size="small"
          bordered
          class="general-ledger-table"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'code'">
              <span :class="{ 'font-medium': record.isSpecial }">
                {{ record.code }}
              </span>
            </template>
            <template v-else-if="column.key === 'period'">
              <span :class="{ 'font-medium': record.isSpecial }">
                {{ record.period }}
              </span>
            </template>
            <template v-else-if="column.key === 'summary'">
              <span :class="{ 'font-medium': record.isSpecial }">
                {{ record.summary }}
              </span>
            </template>
            <template v-else-if="column.key === 'debit'">
              <span :class="{ 'font-medium': record.isSpecial }">
                {{ formatAmount(record.debit) }}
              </span>
            </template>
            <template v-else-if="column.key === 'credit'">
              <span :class="{ 'font-medium': record.isSpecial }">
                {{ formatAmount(record.credit) }}
              </span>
            </template>
            <template v-else-if="column.key === 'direction'">
              <span :class="{ 'font-medium': record.isSpecial }">
                {{ record.direction }}
              </span>
            </template>
            <template v-else-if="column.key === 'balance'">
              <span :class="{ 'font-medium': record.isSpecial }">
                {{ formatAmount(record.balance) }}
              </span>
            </template>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.general-ledger-table :deep(.ant-table-tbody > tr.ant-table-row) {
  background-color: #fff;
}

.general-ledger-table :deep(.ant-table-thead > tr > th) {
  background-color: #fafafa;
  font-weight: 500;
  text-align: center;
}

.general-ledger-table :deep(.ant-table-tbody > tr > td) {
  padding: 8px 12px;
}

.general-ledger-table :deep(.ant-table-tbody > tr:hover > td) {
  background-color: #f5f5f5;
}
</style>
